<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>生命周期(新)</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../../newjs/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../../newjs/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../../newjs/babel.min.js"></script>
	<script type="text/babel">
		//创建组件
		class Time extends React.Component{
            state = {date:new Date()}
			//组件挂载完毕的钩子
			componentDidMount(){
				this.timer = setInterval(() => {
                    this.setState({date:new Date()})
                }, 1000);
			}
			//组件将要卸载的钩子
			componentWillUnmount(){
				clearInterval(this.timer)
			}
            // diffing 逐层对比  最小力度是标签  只更新span中的内容  如果span里面还有标签再进行对比  没有更新就直接使用真实DOM
			render(){
				return(
					<div>
                        <h1>今天天气好晴朗</h1>
                        <input type="text" />
                        <span>
                            现在是：{this.state.date.toTimeString()}
                            <input type="text" />    
                        </span>
					</div>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Time />,document.getElementById('test'))
	</script>
</body>
</html>